<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Configuring the Paginator</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#demo {
    width: 525px;
}
#pag {
    display: inline;
    float: left;
    width: 250px;
    margin-top: 0;
}
#pag a {
    color: #0000de;
    text-decoration: underline;
    padding: .5ex 0;
}
#pag label {
    display: block;
    margin: 1ex 0;
}
#pag p {
    margin: .25ex 0;
}

.yui-skin-sam #pag .yui-pg-pages {
    display: block;
}
.yui-skin-sam #pag .yui-pg-page {
    display: block;
    background-color: #f1f6f7;
    background: transparent;
    border: none;
    white-space: normal;
}
.yui-skin-sam #pag .yui-pg-current-page {
    padding: .5ex 0;
    background-color: #ffe;
    font-style: italic;
}
.yui-skin-sam #pag .yui-pg-current {
    margin: 0;
    white-space: normal;
    font-weight: bold;
    font-size: 113%;
}
.yui-skin-sam #demo .yui-dt caption {
    margin: 0.2em 0 0;
    color: #e76300;
    font-weight: bold;
}
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Configuring the Paginator</h1>

<div class="exampleIntro">
	<p>This example demonstrates the various configuration options for the YAHOO.widget.Paginator class included with the DataTable.  Note that all navigation in the left column is generated by the Paginator.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <div id="pag"></div>
    <div id="tbl"></div>
</div>

<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {

    // Sort our data by state, then area code
    var Data = YAHOO.example.Data.areacodes;
    Data.sort(function (a,b) {
        return YAHOO.util.Sort.compare(a.state,b.state) ||
               YAHOO.util.Sort.compare(a.areacode,b.areacode);
    });

    // Custom function we'll use for the page links
    var buildPageLabel = function (recs) {
        var start = recs[0],
            end   = recs[1];

        // Nested function to find the smallest substring
        // to indicate how two strings differ
        var diffNames = function (a,b) {
            var aa = a.state.toLowerCase(),
                bb = b.state.toLowerCase();

            for (var i = 0, len = aa.length; i < len; ++i) {
                if (aa.charAt(i) !== bb.charAt(i)) {
                    return a.state.substr(0,i+1);
                }
            }

            return a.state + ' ('+a.areacode+')';
        };

        // Build label as "A - C" or "Abc - Def"
        var label = '';
        if (!start) {
            label = Data[0].state.substr(0,2) + ' - ';
        } else {
            label = diffNames(Data[start], Data[start-1]) + ' - ';
        }

        if (Data[end+1]) {
            label += diffNames(Data[end], Data[end+1]);
        } else {
            label += diffNames(Data[end], Data[start]);
        }

        return label;
    };


    // Paginator configurations
    var myPaginatorConfig = {
        // REQUIRED
        rowsPerPage : 20,

        // REQUIRED, but DataTable will default if not provided
        containers  : 'pag',

        // If not provided, there is no last page or total pages.
        // DataTable will set this in the DataSource callback, so this is
        // redundant.
        totalRecords : Data.length,

        // page to activate at load
        initialPage : 3,

        // Class the element(s) that will contain the controls
        containerClass : 'yui-pg-container', // default

        // Define the innerHTML of the container(s) using placeholders
        // to identify where the controls will be located
        template :
            '<h3>Now showing:</h3>' +
            '<p>{CurrentPageReport}</p>' +
            '<p class="pg-nav">' +
                '{FirstPageLink} {PreviousPageLink} ' +
                '{NextPageLink} {LastPageLink}' +
            '</p>' +
            '<label>Page size: {RowsPerPageDropdown}</label>' +
            '<h3>Directory</h3>' +
            '{PageLinks}',

        // If there is less data than would display on one page, pagination
        // controls can be omitted by setting this to false.
        alwaysVisible : true, // default

        // Override setPage (et al) to immediately update internal values
        // and update the pagination controls in response to user actions.
        // Default is false; requests are delegated through the changeRequest
        // event subscriber.
        updateOnChange : false, // default

        // Options for FirstPageLink component
        firstPageLinkLabel : "&lt;&lt;",
        firstPageLinkClass : "yui-pg-first", // default

        // Options for LastPageLink component
        lastPageLinkLabel : "&gt;&gt;",
        lastPageLinkClass : "yui-pg-last", // default

        // Options for PreviousPageLink component
        previousPageLinkLabel : "&lt; previous",
        previousPageLinkClass : "yui-pg-previous", // default

        // Options for NextPageLink component
        nextPageLinkLabel : "next &gt;", // default
        nextPageLinkClass : "yui-pg-next", // default

        // Options for PageLinks component
        pageLinksContainerClass : 'yui-pg-pages',        // default
        pageLinkClass           : 'yui-pg-page',         // default
        currentPageClass        : 'yui-pg-current-page', // default

        // Display a maximum of X page links.  Use
        // YAHOO.widget.Paginator.VALUE_UNLIMITED to show all page links
        pageLinks               : YAHOO.widget.Paginator.VALUE_UNLIMITED,

        // Create custom page link labels
        pageLabelBuilder        : function (page,paginator) {
            return buildPageLabel(paginator.getPageRecords(page));
        },

        // Options for RowsPerPageDropdown component
        rowsPerPageDropdownClass : "yui-pg-rpp-options", // default
        rowsPerPageOptions       : [
            { value : 20, text : "small" },
            { value : 40, text : "medium" },
            { value : 100, text : "large" }
        ],

        // Options for CurrentPageReport component
        pageReportClass : 'yui-pg-current', // default

        // Provide a key:value map for use by the pageReportTemplate.
        // Unlikely this will need to be customized; see API docs for the
        // template keys made available by the default value generator
        pageReportValueGenerator : function (paginator) {
            var recs  = paginator.getPageRecords();

            return {
                start     : Data[recs[0]].state,
                end       : Data[recs[1]].state
            };
        },

        // How to render the notification of the Paginator's current state
        pageReportTemplate : '{start} - {end}'
    };

    // Create the Paginator for our DataTable to use
    var myPaginator = new YAHOO.widget.Paginator(myPaginatorConfig);


    // Normal DataTable configuration
    var myColumnDefs = [ {key:"state",    label:"State", minWidth: 150},
                         {key:"areacode", label:"Code",  width: 30}];

    var myDataSource = new YAHOO.util.DataSource(Data);
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    myDataSource.responseSchema = {
        fields : ["state","areacode"]
    };

    // Pass the Paginator in the DataTable config
    var myTableConfig = {
        paginator : myPaginator,
        caption : 'Area Codes by State'
    };

    var myDataTable = new YAHOO.widget.DataTable('tbl',
        myColumnDefs, myDataSource, myTableConfig);
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>